<template>
  <div>
    <el-dialog v-model="open" :title="dialogTitle" width="500px" @close="close">
      <el-card class="box-card">
        <el-checkbox-group v-model="checkList" @change="checkListChange">
          <el-row>
            <el-col :span="12" v-for="(item, index) in columnData" :key="item.fieldName">
              <el-checkbox :label="item.name" :checked="item.status == '1'" :disabled="index == '0'">
                <el-tooltip :content="item.name" effect="light">{{ item.name }}</el-tooltip>
              </el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </el-card>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button plain @click="close">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
const props = defineProps({
  open: Boolean,
  title: String,
  columnData: Array
})
const emits = defineEmits(['update:open', 'saveColumn'])
const { proxy } = getCurrentInstance()
const dialogTitle = computed(() => props.title + ' — 列设置')
const checkList = ref([])
const newData = ref()

watch(() => props.columnData, () => {
  newData.value = toRaw(props.columnData)
})

const checkListChange = (val) => {
  let allUnchecked = newData.value.map(item => {
    item.status = '0'
    return item
  })
  newData.value = allUnchecked.map(checkItem => {
    if (val.includes(checkItem.name)) {
      checkItem.status = '1'
    }
    return checkItem
  })
}

const save = () => {
  emits('saveColumn', newData.value)
}

const close = () => {
  emits('update:open', false)
}

</script>
<style scoped lang="scss">
:deep(.el-checkbox) {
  width: 100%;
  .el-checkbox__label {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }
}
</style>